<template>
	<view class="form-item-container"

	 @touchmove="touchmove"
	 @touchstart="touchstart"
	 @touchend="touchend"
	>
    <view class="form-item-body" @click="clickItem" :style="style">
      <view class="item-label">
        <view class="label" v-if="title">{{title}}</view>
        <slot name="label"></slot>
      </view>
      <view class="item-value">
        <view class="value" v-if="value">
          {{value}}
        </view>
        <slot name="value"></slot>
        <image v-if="more"
               class="img"
               src="/images/components/right_arrow.png"></image>
      </view>
    </view>
    <view class="form-item-menu" @click="closeMenu" :style="style">
      <slot name="menu"></slot>
    </view>
	</view>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted, getCurrentInstance } from 'vue';
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  value: {
    type: String,
    default: ''
  },
  more: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['clickItem'])

const clickItem = ()=>{
  emit('clickItem')
}
const closeMenu = ()=>{
  style.value = `transform: translateX(0px);transition: all 0.25s ease-in-out;`
  expandMenu.value = false
}
const maxOffset = ref(0)
const { proxy } = getCurrentInstance()
onMounted(()=>{
  const query = uni.createSelectorQuery().in(proxy)
  query.select('.form-item-menu').boundingClientRect(data => {
    console.log('元素宽度:', data)
    data.style = 'background-color: black;'
    maxOffset.value = data.width
  }).exec()
})
const style = ref('')
const expandMenu = ref(false)
const translateX = ref({
  distance: 0,
  direction: -1
})

const startX = ref(0)
const touchstart = (e)=>{
	const touche = e.touches[0] || {}
	startX.value = touche.clientX || 0
}
const touchmove = (e)=>{
  // e.preventDefault();
  const touche = e.touches[0] || {}
  const currentX = touche.clientX || 0
  const move  = currentX - startX.value
  let distance = Math.abs(move)
  const direction = move > 0 ? 1 : -1;//左移-1 右移1

  if(distance === 0){
    return;
  }
  if(distance >= maxOffset.value){
    distance = maxOffset.value
  }
  if(expandMenu.value && direction === -1){
	  return
  }
  if(!expandMenu.value && direction === 1){
	  return
  }
  if(direction === -1){
    //左移
    style.value = `transform: translateX(${-distance}px);`
  }else {
    //右移
    style.value = `transform: translateX(${-maxOffset.value + distance}px);`
  }

  translateX.value = {
    distance: distance,
    direction: direction
  }
}
const touchend = (e)=>{
  const tempTranslateX = translateX.value
  if(tempTranslateX.distance === 0){
    return
  }
  const expand = expandMenu.value
  if((expand && tempTranslateX.direction === -1) || (!expand && tempTranslateX.direction === 1)){
    return;
  }
  const maxDistance = maxOffset.value
  if(expand){
    style.value = `transform: translateX(0px);transition: all 0.25s ease-in-out;`
    expandMenu.value = false
  }else {
    style.value = `transform: translateX(${-maxDistance}px);transition: all 0.25s ease-in-out;`
    expandMenu.value = true
  }
}
</script>

<style lang="scss">
	.form-item-container {
    box-sizing: border-box;
    padding: 20rpx;
    height: 120rpx;
    width: 100%;

    display: flex;
    flex-direction: row;
    overflow: hidden;
    .form-item-body{
      height: 100%;
      flex: none;
      display: flex;
      flex-direction: row;
      .item-label {
        display: flex;
        flex-direction: row;
        align-items: center;
        .label{
          font-size: 32rpx;
          color: #919599;
          line-height: 44rpx;
          font-weight: 400;
        }
      }
      .item-value {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        .value{
          font-size: 32rpx;
          color: #212425;
          text-align: right;
          line-height: 44rpx;
          font-weight: 400;
        }
        .img{
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
    .form-item-menu{
      flex: none;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      height: inherit;
      right: 0;

      transform: translateX(100%);
    }
	}
</style>
